<template>
	<view class="patient-content">
		<view class="patient-information uni-flex">
			<view class="patient-portrait">
				<image src="../../../static/public/portrait02.png" mode="scaleToFill"></image>
			</view>
			<view class="patient-information-details uni-flex-item">
				<view class="uni-flex">
					<view class="uni-flex-item">可爱小猪</view>
				</view>
				<view>12岁 - 男</view>
				<view>13872448283 - 妈妈</view>
				<view>dm20191019004 - 德米</view>
			</view>
		</view>
		<view class="patient-operation">
			<view class="patient-special">
				<view class="patient-item-title">请添加此次回访结果</view>
				<view class="patient-item-fill">
					<textarea value="" />
				</view>
			</view>
			
			<view class="patient-title-special"><text>已设置回访时间：</text><text>2019-10-27 13:24:21</text></view>
				
			<view class="patient-operation-item">
				<view class="patient-item-title">跟踪状态</view>
				<view class="patient-item-fill uni-flex-item">
					<picker class="list-picker" :value="stateIndex" :range="stateList" @change="bindPickerChange('0',$event)">
						<view>{{stateList[stateIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="patient-operation-item">
				<view class="patient-item-title">下次跟进时间</view>
				<view class="patient-item-fill uni-flex-item">
					<picker class="list-picker" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindPickerChange('99',$event)">
						<view>{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="patient-operation-item">
				<view class="patient-item-title">归属人</view>
				<view class="patient-item-fill uni-flex-item">
					<input class="list-input" type="text" placeholder-class="placeholderclass" placeholder="输入归属人"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				stateIndex:0,
				stateList: ['请选择', '待定', '跟进', '预约'],
				date: currentDate
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPickerChange(type,event){
				switch (type){
					case '0':
						this.stateIndex = event.target.value
						break;
					case '1':
						this.stateIndex = event.target.value
						break;
					case '99':
						this.date = event.target.value
						break;
					default:
						break;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.patient-content{
		padding:20rpx 2.5% 0;
	}
	
	.patient-information{
		background-color:white;
		border-radius:10rpx;
		box-shadow:0 1rpx 10rpx #cccccc;
		padding:40rpx;
		
		.patient-portrait{
			width: 150rpx;
			image{
				width: 110rpx;
				height: 110rpx;
			}
		}
	}
	
	.patient-information-details{
		line-height: 55rpx;
	}
	.patient-title-special{
		color:#8abaff;
		margin:30rpx 0 20rpx;
	}
	
	.patient-operation{
		flex-wrap:wrap;
		background-color:white;
		margin:30rpx 0;
		box-shadow:0 1rpx 10rpx #cccccc;
		border-radius:8rpx;
		padding:30rpx 30rpx 50rpx;
	}
	
	.patient-special{
		textarea{
			margin-top:8px;
			border:2rpx solid #999999;
			border-radius:6rpx;
			padding:5rpx 10rpx;
			height: 200rpx;
			width: 100%;
		}
	}
	
	.patient-operation-item{
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 2rpx solid #cccccc;
		
		.patient-item-title{
			width: 200rpx;
		}
		
		.list-picker{
			text-align: right;
			padding-right: 15rpx;
		}
		.list-input{
			text-align: right;
			padding-right: 22rpx;
		}
	}
</style>
